<template>
  <div class="homeWrap">
    <!-- ---------------顶部横幅------------ -->
    <div class="topBanner">
      <img
        src="https://imagev2.xmcdn.com/storages/3777-audiofreehighqps/49/07/GMCoOSMH3Kb7AAAPQgH_va2X.png"
        alt=""
      />
      <div class="openApp" @click="operationUser">
        {{ token ? '退出登录' : '登录' }}
      </div>
    </div>
    <!-- -------------搜索框----------------- -->
    <div class="search" @click="toSearch">
      <Search shape="round" placeholder="搜索" readonly></Search>
    </div>
    <!-- ----------------其他选择----------------- -->

    <div class="other flex">
      <div class="rank flexC" @click="">
        <router-link to="/list">
          <img
            class="rankLogo"
            src="https://fdfs.xmcdn.com/group56/M09/3B/BD/wKgLgFyQujLCAVYRAAAuwA7DZMg198.png"
            alt=""
          />
        </router-link>
        <span>排行榜</span>
      </div>
      <div class="rank flexC">
        <router-link to="/category">
          <img
            class="rankLogo"
            src="https://fdfs.xmcdn.com/group60/M02/18/F4/wKgLeVziZxHRlc-lAAAO9ZkPU-I489.png"
            alt=""
          />
        </router-link>
        <span>分类</span>
      </div>
      <div class="rank flexC">
        <router-link to="/LNFlisten">
          <img
            class="rankLogo"
            src="https://fdfs.xmcdn.com/group57/M0A/3B/D0/wKgLgVyQuqWRZsJtAAAnr8tg4rs307.png"
            alt=""
          />
        </router-link>

        <span>听单</span>
      </div>
    </div>
    <!-- -------------------广告图------------------------------ -->
    <div class="advImg">
      <img
        src="https://imagev2.xmcdn.com/group61/M0A/CD/B2/wKgMZl0W1legiUgkAACPrBBFcJ4381.png"
        alt=""
      />
    </div>
    <!-- ---------------------新人必听------------------------ -->
    <div class="listen">新人必听</div>
    <div class="bookList flex">
      <scz-card
        v-for="album in albumsList"
        :key="album.albumId"
        :albumItem="album"
      ></scz-card>
    </div>
    <!-- ------------------------限时免费---------------------- -->
    <div class="listen">
      限时免费
      <span class="box" v-if="limitSeconde"
        ><span>{{ limitHour }}</span
        >:<span>{{ limitMinute }}</span
        >:<span>{{ limitSeconde }}</span></span
      >
    </div>
    <div class="hotWrap">
      <div class="freeTime flex">
        <scz-card
          v-for="album in limitTimeList"
          :key="album.id"
          :albumItem="album"
        ></scz-card>
      </div>
    </div>

    <!-- -------------------今日热点----------------------- -->
    <scz-hot-card :tracks="nowHotList" title="今日热点"></scz-hot-card>

    <!-- --------------底部版权------------------- -->
    <div class="footer">
      <img
        class="bigImg"
        src="https://imagev2.xmcdn.com/storages/2165-audiofreehighqps/52/6D/GKwRIDoF6Ml9AAESnAEaI6xF.png!magick=webp"
        alt=""
      />
      <img
        class="smallImg"
        src="https://imagev2.xmcdn.com/storages/72b6-audiofreehighqps/30/CE/GMCoOR8H3gffAAAQWAIAHhDF.png!magick=webp"
        alt=""
      />
      <p class="copyright">© 2014-2023喜马拉雅 版权所有</p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';

export default defineComponent({
  name: 'index',
});
</script>

<script setup lang="ts">
import { Search, showNotify } from 'vant';
import { useRouter } from 'vue-router';
import { reqGetPageListenList, reqGetFreeAndHotList } from '@/api/scz-home.ts';

// 获取到本地存储的token
const token = ref(localStorage.getItem('token'));

const pageNum = ref(1);
const pageSize = ref(6);
const router = useRouter();
// 存储新人听书的数据
const albumsList = ref([]);

// 存储限时免费的数据
const limitTimeList = ref([]);

// 存储今日热点的数据
const nowHotList = ref([]);
// 限时购买的时间
let limitHour = ref();
let limitMinute = ref();
let limitSeconde = ref();

// 封装限时抢购的时间格式化函数
function formatTime(time: number) {
  const timer = setInterval(() => {
    time--;
    limitHour.value = Math.floor((time / 60 / 60) % 24);
    limitHour.value =
      limitHour.value < 10 ? '0' + limitHour.value : limitHour.value;
    limitMinute.value = Math.floor((time / 60) % 60);
    limitMinute.value =
      limitMinute.value < 10 ? '0' + limitMinute.value : limitMinute.value;

    limitSeconde.value = Math.floor(time % 60);
    limitSeconde.value =
      limitSeconde.value < 10 ? '0' + limitSeconde.value : limitSeconde.value;

    if (!time) {
      clearInterval(timer);
    }
  }, 1000);
}

// 封装获取新人必听列表的数据函数
async function getPageListenList() {
  try {
    const res = await reqGetPageListenList(pageNum.value, pageSize.value);
    // console.log(res)
    albumsList.value = res.data.albums;
  } catch (error) {
    console.log(error);
  }
}

// 获取到限时免费和热点的数据
async function getFreeTimeAndHotList() {
  try {
    const res = await reqGetFreeAndHotList();
    console.log(res, '限时免费和今日热点');
    limitTimeList.value = res.data.limitedFreeAlbum.limitedTimeFreeAlbums;
    nowHotList.value = res.data.hotTrack.hotTracks;
    formatTime(res.data.limitedFreeAlbum.remainingTime);
  } catch (error) {
    console.log(error);
  }
}

// 主页挂载的时候获取到新人必听的数据

onMounted(() => {
  getPageListenList();
  getFreeTimeAndHotList();
});
// 跳转到搜索页
function toSearch() {
  router.push('/search');
}

// 登录还是退出
function operationUser() {
  if (token.value) {
    showNotify({
      type: 'success',
      message: '退出登录成功',
    });
    localStorage.removeItem('token');
    localStorage.removeItem('userInfo');
    token.value = '';
  } else {
    router.push('/login');
  }
}
</script>

<style scoped lang="less">
.homeWrap {
  // 顶部logo
  .topBanner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 5px 15px;
    padding-top: 15px;

    height: 50px;
    width: 100%;
    img {
      width: 116px;
      height: 29px;
    }
    .openApp {
      height: 29px;
      width: 88px;
      line-height: 29px;
      text-align: center;
      font-size: 14px;
      background-color: #fa2800;
      color: #fff;
      border-radius: 15px;
    }
  }

  // .search {

  // }
  // 其他分类
  .other {
    padding-top: 20px;
    height: 54px;
    width: 100%;
    justify-content: center;
    border-top: 1px solid #ccc;
    // background-color: violet;
    .rank {
      height: 54px;
      font-size: 12px;
      width: 102px;
      align-items: center;
      .rankLogo {
        width: 34px;
        height: 34px;
      }
    }
  }
  // 广告图片
  .advImg {
    margin: 18px 0 8px;
    height: 81px;
    width: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  // 新人必听
  .listen {
    margin: 17px 0px 15px;
    padding: 10px 15px 0px;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: 600;
    color: #40404c;
    .box {
      background: transparent;
      font-weight: 400;
      span {
        font-weight: 400;
        background: red;
        color: #fff;
      }
    }
  }
  // 书本内容
  .bookList {
    padding: 0 15px;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  // 限时免费
  .hotWrap {
    width: 100%;
    overflow: scroll;
    .freeTime {
      min-width: 100%;
      flex-wrap: nowrap;
      justify-content: start;
    }
  }
  .hotWrap::-webkit-scrollbar {
    display: none;
  }
  .footer {
    position: relative;
    height: 180px;
    width: 100%;
    font-size: 12px;
    text-align: center;
    color: #808080;

    .bigImg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      height: 180px;
      width: 100%;
    }
    .smallImg {
      margin-top: 34px;
      width: 102px;
      height: 36px;
    }
  }
}
</style>
